<template>
  <div>
    <el-card>
      <el-table border :data="records">
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column label="名称" show-overflow-tooltip width="150px" prop="skuName"></el-table-column>
        <el-table-column label="描述" show-overflow-tooltip width="150px" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片" width="150px">
          <template #="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px;" :alt="row.skuName">
          </template>
        </el-table-column>
        <el-table-column label="重量（g）" width="150px" prop="weight"></el-table-column>
        <el-table-column label="价格（元）" width="150px" prop="price"></el-table-column>
        <!-- 某一列固定 -->
        <el-table-column label="操作" width="250px" fixed="right" align="center">
          <!-- @vue-ignore -->
          <template #="{ row }">
            <el-button size="small" :icon="row.isSale ? 'Top' : 'Bottom'" :type="row.isSale ? 'success' : 'info'"
              @click="updateSale(row)"></el-button>
            <el-button size="small" icon="Edit" type="primary" @click="updateSku(row)"></el-button>
            <el-button size="small" icon="InfoFilled" type="info" @click="viewSku(row)"></el-button>
            <el-popconfirm :title="`您确认删除 ${row.skuName} 吗？`" @confirm="delSku(row.id)" width="400">
              <!-- 插槽，将button放到里面 -->
              <template #reference>
                <el-button size="small" icon="Delete" type="danger"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin: 20px 0;" v-model:current-page="pageNo" v-model:page-size="pageSize"
        :page-sizes="[5, 10, 30, 50]" background layout="prev, pager, next, jumper,->,sizes,total" :total="total"
        @current-change="reqGetAllSkuList" @size-change="reqGetAllSkuList" />
      <!-- 抽屉组件 展示商品详情 -->
      <el-drawer v-model="drawer" title="信息">
        <!-- 头部 插槽内容 -->
        <template #header>
          <h4>查看商品详情</h4>
        </template>
        <!-- 身体 插槽-->
        <template #default>
          <!-- 使用栅格系统 -->
          <el-row>
            <el-col :span="6">名称</el-col>
            <el-col :span="18">{{ skuInfo.skuName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">描述</el-col>
            <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">价格￥</el-col>
            <el-col :span="18">{{ skuInfo.price }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">平台属性</el-col>
            <el-col :span="18">
              <el-tag v-for="item in skuInfo.skuAttrValueList" :key="item.id" style="margin: 5px">{{
                item.valueName }}</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">销售属性</el-col>
            <el-col :span="18">
              <el-tag v-for="item in skuInfo.skuSaleAttrValueList " :key="item.id" style="margin: 5px" type="warning">
                {{ item.saleAttrValueName }}</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">图片</el-col>
            <el-col :span="18">
              <!-- 轮播图 -->
              <el-carousel :interval="2000" type="card" height="200px" width="100vw" :autoplay="false">
                <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                  <!-- 放内容 -->
                  <img :src="item.imgUrl" alt="" style="width: 100%;height: 100%;object-fit: contain;">
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </template>
        <!-- 底部插槽内容 -->
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqGetAllSku, reqCancelSale, reqSaleSku, reqGetInfo, reqDeleteSku } from "@/api/product/sku"
import { SkuResponseData, SkuData, SkuInfoData } from "@/api/product/sku/type"
import { ElMessage } from 'element-plus';
// 当前页码
const pageNo = ref<number>(1)
// 每页条数
const pageSize = ref<number>(5)
// 总个数
const total = ref<number>(0)
// sku数组数据
const records = ref<SkuData[]>([])
// sku抽屉的数据
const skuInfo = ref<any>({})
// 控制抽屉的显示与隐藏
const drawer = ref<boolean>(false)
// 获取数据的方法
const reqGetAllSkuList = async (pager = 1) => {
  pageNo.value = pager
  const res: SkuResponseData = await reqGetAllSku(pageNo.value, pageSize.value)
  if (res.code === 200) {
    total.value = res.data.total
    records.value = res.data.records
  }
}
// 更新上下架
const updateSale = async (row: SkuData) => {
  row.isSale = !row.isSale
  // 上架成功
  if (row.isSale) {
    const res = await reqSaleSku((row.id) as number)
    if (res.code === 200) {
      ElMessage.success("上架成功");
    }
  } else {
    // 下架成功
    const res = await reqCancelSale((row.id) as number)
    if (res.code === 200) {
      ElMessage("下架成功");
    }
  }
  // 重新获取服务器数据
  reqGetAllSkuList(pageNo.value)
}
// 编辑sku信息
const updateSku = (row: SkuData) => {
  console.log(row);
  ElMessage.warning("努力更新中，请耐心等待哦...");
}
// 控制抽屉的显示与隐藏
const viewSku = async (row: any) => {
  drawer.value = true
  // 获取已有商品详情
  const res: SkuInfoData = await reqGetInfo(row.id)
  console.log(res);
  skuInfo.value = res.data
}
// 删除sku
const delSku = async (id: number | string) => {
  ElMessage.warning("努力删除中，请耐心等待哦...");
  const res = await reqDeleteSku(id)
  if (res.code == 200) {
    ElMessage.success("删除成功");
    reqGetAllSkuList(pageNo.value)
  } else {
    ElMessage.error(res.message);
  }
  console.log(res);
}
// 页面挂载完成后调用方法
onMounted(() => {
  reqGetAllSkuList()
})
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}



.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
